<template>
    <div class="content-tree" :style="{'width' : left + 'px'}">
        <div class="funcrionButton">
            <i class="buttomItem el-icon-folder-remove" title="全部收起" @click="$bus.$emit('hideAllFolder')"></i>
            <i class="buttomItem el-icon-download" title="导出JS" @click="downLoadFileTest"></i>
            <!-- $bus.downloadJSFile -->
        </div>
        <div class="content-tree-scroll">
            <div class="content-tree-item" style="padding: 10px 0 120px 0;">
                <folder v-for="item in treeData" :key="item.id" :folder="item"></folder>
            </div>
        </div>
    </div>
</template>

<script>
import folder from './folder.vue'

export default {
    components: {
        folder
    },
    props: ['left'],
    data() {
        return {
            treeData: this.$bus.treeData
        }
    },
    methods: {
        async downLoadFileTest() {
            var blobWriter = new zip.BlobWriter("application/zip");
            var zipWriter = new zip.ZipWriter(blobWriter);

            var fileString = this.$bus.downloadJSFile();
            // console.log(fileString);

            for (const key in fileString) {
                const element = fileString[key];
                var TEXT_CONTENT = element;
                var FILENAME = key + ".js";
                var BLOB = new Blob([TEXT_CONTENT], { type: zip.getMimeType(FILENAME) });
                await zipWriter.add(FILENAME, new zip.BlobReader(BLOB));
            }
            var blobURL = URL.createObjectURL(await zipWriter.close());
            var anchor = document.createElement("a");
            var clickEvent = new MouseEvent("click");
            anchor.href = blobURL; anchor.download = 'test.zip'; anchor.dispatchEvent(clickEvent);
        }
    },
}
</script>

<style scoped>
.content-tree {
    position: absolute;
    width: 270px;
    left: 0;
    top: 0;
    overflow: hidden;
    bottom: 0;
}
.content-tree-scroll {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    overflow-y: scroll;
}

.funcrionButton {
    width: 100%;
    position: absolute;
    top: 0px;
    border-bottom: 1px solid #eee;
    height: 50px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.buttomItem {
    width: 40px;
    height: 40px;
    float: right;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    margin: 10px 0;
    cursor: pointer;
    color: #999;
    transition: 0.3 all;
}

.buttomItem:hover {
    color: #666;
}
</style>